<template>
	<view class="page-container">
		<view class="padded-15">
			<uni-forms ref="form" :rules="rules" :modelValue="formData">
				<view class="font-16 padded-5">基本信息</view>
				<view class="form-container">
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="所属银行" label-width="80" required name="bank">
							<uni-data-picker placeholder="请选择" popup-title="请选择" :localdata="banks" v-model="formData.bank" @change="onBankChange">
							</uni-data-picker>
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="贷款类型" label-width="80" required name="type">
							<view class="">
								<uni-data-checkbox v-model="formData.type" :localdata="types" />
							</view>
						</uni-forms-item>
					</view>

					<view @click="getyhcp" class="border-b-F5F5F5 form-item-view">
						<uni-forms-item  label="产品名称" label-width="80" required name="title">
							<uni-easyinput v-model="formData.title" :inputBorder="false" placeholder="请输入" />
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="贷款总额" label-width="80" required name="total">
							<uni-easyinput type=number v-model="formData.total" :inputBorder="false" placeholder="请输入" />
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="年化利率" label-width="80" required name="rate">
							<uni-easyinput type=number v-model="formData.rate" :inputBorder="false" placeholder="%" />
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="还款方式" label-width="80" required name="bank">
							<uni-data-picker placeholder="请选择" popup-title="请选择" :localdata="modes" v-model="formData.mode" @change="onModeChange">
							</uni-data-picker>
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="开始还款日期" label-width="80" required name="start_at">
							<uni-datetime-picker type="date" :clear-icon="false" :border="false" placeholder="请选择"  v-model="formData.start_at" @maskClick="maskClick" />
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="还款期数" label-width="80" name="period">
							<uni-easyinput type=number v-model="formData.period" :inputBorder="false" placeholder="请输入" />
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="借款人" label-width="80" name="borrower">
							<uni-easyinput v-model="formData.borrower" :inputBorder="false" placeholder="请输入" />
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="借款人关系" label-width="80" name="relationship">
							<uni-data-picker placeholder="请选择" popup-title="请选择" :localdata="relationships" v-model="formData.relationship" @change="onRelationshipChange">
							</uni-data-picker>
						</uni-forms-item>
					</view>
				</view>
				<view class="font-16 padded-5">担保情况</view>
				<view class="form-container">
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="担保类型" label-width="80" name="guarantee_type">
							<uni-data-picker placeholder="请选择" popup-title="请选择" :localdata="guarantee_types" v-model="formData.guarantee_type" @change="onBankChange">
							</uni-data-picker>
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="担保人/公司" label-width="80" name="guarantee">
							<uni-easyinput v-model="formData.guarantee" :inputBorder="false" placeholder="请输入" />
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="担保物" label-width="80" name="collateral">
							<uni-easyinput v-model="formData.collateral" :inputBorder="false" placeholder="请输入" />
						</uni-forms-item>
					</view>
				</view>	
				<button @click="add_list()" class="btn right-btn bg-FFFFFF font-14 margin-t-15" type="primary" plain="true" >生成还款计划</button>
				<view class="font-16 padded-5 ">还款计划</view>
				<view class="form-container margin-t-10" v-for="(item,index) in list" :key="index">
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item :label="item.principal_title" label-width="80" name="principal">
							<uni-easyinput v-model="item.principal" :inputBorder="false" placeholder="请输入" />
							</uni-data-picker>
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item :label="item.interest_title" label-width="80" name="interest">
							<uni-easyinput v-model="item.interest" :inputBorder="false" placeholder="请输入" />
							</uni-data-picker>
						</uni-forms-item>
					</view>
					<view class="border-b-F5F5F5 form-item-view">
						<uni-forms-item label="还款日期" label-width="80" name="repayment_date">
						   <uni-datetime-picker  v-model="item.repayment_date" type="date" :clear-icon="false" :border="false" placeholder="请选择"  @maskClick="maskClick" />
						</uni-forms-item>
					</view>
				</view>	
				
				
				<view class="padded-60"></view>
				<view class="page-bottom clearfix">
					<view class="cancle-btn pull-left">
						<button type="default" class="font-14 bg-FFFFFF padded-t-10 padded-b-10" :data-url="'/pages/index/data_upload'" @click="clickJump">取消</button>
					</view>
					<view class="save-btn pull-left padded-l-10">
						<button type="primary" class="font-14 padded-t-10 padded-b-10" @click="submit">保存</button>
					</view>
				</view>
			</uni-forms>
			
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			const id = options.id;
			if (id) {
			    const decodedId = decodeURIComponent(id);
			    if (decodedId) {
					this.getbd(id);
			    }
			}
			this.getServerData();
		},
		data() {
			return {
				formData: {
					id: '',
					bank: '',
					type: 1,
					title: '',
					titleid: '',
					total: '',
					mode: '',
					start_at: '',
					period: '',
					borrower: '',
					relationship: '',
					guarantee_type:'',
					guarantee:'',
					collateral:'',
					rate: '',
				},
				list_id:1,
				list:[
					/*
					{
						list_id: 1,
						principal:'',
						interest:'',
						repayment_date:'',
						principal_title:'第1期本金',
						interest_title:'第1期利息',
					},
					*/
				],
				rules: {},
				guarantee_types:[
					{
						text: '信用担保',
						value: '信用担保'
					},
					{
						text: '担保公司',
						value: '担保公司'
					},
					{
						text: '担保物',
						value: '担保物'
					}
				],
				types: [
					{
						text: '企业贷款',
						value: 1
					},
					{
						text: '个人贷款',
						value: 2
					}
				],
				banks: [
					{
						text: '建设银行',
						value: 2
					},
					{
						text: '中国银行',
						value: 1
					}
				],
				modes: [
					{
						text: '等额本息',
						value: '等额本息'
					},
					{
						text: '等额本金',
						value: '等额本金'
					},
					{
						text: '等本等息',
						value: '等本等息'
					},
					{
						text: '先息后本',
						value: '先息后本'
					}
				],
				periods: [
					{
						text: '3期',
						value: 3
					},
					{
						text: '6期',
						value: 6
					},
					{
						text: '12期',
						value: 12
					},
					{
						text: '24期',
						value: 24
					}
				],
				relationships: [
					{
						text: '本人',
						value: '本人'
					},
					{
						text: '直系亲属',
						value: '直系亲属'
					},
					{
						text: '配偶',
						value: '配偶'
					},
					{
						text: '其他',
						value: '其他'
					}
				]
			}
		},
		methods: {
			getServerData() {
				this.$request().then(res => {
					// 验证登入
				})
				
				// 使用 GET 方法请求数据
				uni.request({
					url: 'https://wn.wdyky.com/index/jrgl/getyh', // 请求地址
					success: (res) => {
						// 请求成功的回调函数
						//console.log('请求成功:', res.data);
						if(res.data.code == 1){
							this.banks = res.data.data;
						}
					},
					fail: function(err) {
						// 请求失败的回调函数
						console.error('请求失败:', err);
					}
				});
			},
			getbd(id){
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/jrcpxq', // 请求地址
				    method: 'GET',
				    data: {
				    	id: id,
				    },
					success: (res) => {
				        // 请求成功的回调函数
				        console.log('请求成功:', res.data);
						if(res.data.code == 1){
							this.formData.id = res.data.data.id;
							
							this.formData.type = res.data.data.dklx;
							this.formData.bank = res.data.data.yhid;
		
							this.formData.title = res.data.data.cpname;
							this.formData.titleid = res.data.data.cpid;
							this.formData.total = res.data.data.dkje;
							this.formData.rate = res.data.data.nhll;
							this.formData.mode = res.data.data.hkfs;
							this.formData.start_at = res.data.data.hkdate;

							this.formData.period = res.data.data.hkqs;
							this.formData.borrower = res.data.data.jkr;
							this.formData.relationship = res.data.data.jkrgx;
							this.formData.guarantee_type = res.data.data.dblx;
							this.formData.guarantee = res.data.data.dbr;
							this.formData.collateral = res.data.data.dbw;
							
							this.list = res.data.list;
						}
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			},
			add_list() {
				/*
				var num=parseInt(this.list_id)+1;
				let add = {
					list_id: 1,
					principal:'',
					interest:'',
					repayment_date:'',
					principal_title:'第'+ num +'期本金',
					interest_title:'第'+ num +'期利息',
				
					this.list.push(add)
					this.list_id = parseInt(this.list_id)+1
				}*/
				
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/hkjs', // 请求地址
				    method: 'GET',
				    data: {
				    	hkqs : this.formData.period,
				    	dkje : this.formData.total,
				    	nhll : this.formData.rate,
				    	hkdate : this.formData.start_at,
				    	hkfs : this.formData.mode,
				    },
					success: (res) => {
				        // 请求成功的回调函数
				        //console.log('请求成功:', res.data);
						if(res.data.code != 1){
							uni.showToast({
								icon: 'none',
								title: res.data.val
							})
						}
						if(res.data.code == 1){
							this.list = res.data.data;
						}
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
				
			},
			submit(){
				//console.log(this.list);
				/*
				if(this.formData.period != this.list.length){
					uni.showToast({
						icon: 'none',
						title: '还款期数与计划不相等'
					})
				}
				*/
				
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/cpxqsave', // 请求地址
				    method: 'POST',
				    data: {
				    	data : this.formData,
				    	jh: JSON.stringify(this.list),
				    },
					success: (res) => {
						if(res.data.code != 1){
							uni.showToast({
								icon: 'none',
								title: res.data.val
							})
						}
						if(res.data.code == 1){
							uni.showToast({
								icon: 'none',
								title: res.data.val
							})
							uni.navigateBack();
						}
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			},
			getyhcp(){
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/getyhcp', // 请求地址
				    method: 'POST',
				    data: {
				    	id : this.bank,
				    	dklx: this.type,
				    },
					success: (res) => {
						console.log('getyhcp:', res.data);
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			},
			onBankChange(e) {
				console.log('onchange:', e);
			},
			onModeChange(e) {
				console.log('onchange:', e);
			},
			maskClick(e) {
				
			},
			onPeriodChange(e) {
				console.log('onchange:', e);
			},
			onRelationshipChange(e) {
				console.log('onchange:', e);
			},
			// 跳转
			clickJump(e){
			
				uni.navigateBack();
			
			},
			
		}
	}
</script>

<style lang="scss">
	@import '@/static/product.scss';
	::v-deep .uni-date-single--x{
		right:-10px;
	}
	.btn{
		padding:5px 0;
		border: 0 !important;
		margin-bottom: 10px;
	}
	.form-container {
		background: #FFFFFF;
		border-radius: 15px;
		
		.form-item-view {
			padding: 15px 10px;
			
			.uni-forms-item {
				margin: 0;
				
				::v-deep .uni-data-checklist {
					
					.checklist-group {
						justify-content: flex-end;
						
						.checklist-box {
							margin: 10px 0;
							margin-left: 25px;
							margin-right: 0;
						}
					}
					
				}
				
				.uni-easyinput__placeholder-class {
					text-align: right;
					color: #646D7F;
					font-size: 14px;
				}
				
				::v-deep .uni-input-input {
					text-align: right;
				}
				
				::v-deep .input-value-border {
					border: none;
					padding-right: 0;
				}
				
				::v-deep .arrow-area {
					display: none;
				}
				
				::v-deep .selected-area {
					justify-content: flex-end;
					color: #646D7F;
					font-size: 14px;
				}
				
				::v-deep .selected-list {
					justify-content: flex-end;
				}
				
				::v-deep .uni-date-x .icon-calendar {
					display: none;
				}
				
				::v-deep .uni-date__x-input {
					text-align: right;
					color: #646D7F;
				}
				
			}
		}

	}
	
	.page-bottom {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 15px;
		padding-bottom: 30px;
		background: #FAFAFA;
		
		.cancle-btn {
			width: 90px;
		}
		
		.save-btn {
			width: calc(100% - 90px);
		}
	}

</style>
